window.addEventListener('load', function () {
    // 获取元素
    let tbody = this.document.querySelector('tbody')
    // 数据渲染
    function init() {
        axios({
            url: '/score/list'
        }).then(res => {
            // console.log(res)
            let data = res.data.data
            // console.log(data)
            let htmlStr = ``
            //    因为不是数组，而是对象，所以用 for(... key in ...)
            for (let key in data) {
                htmlStr += `<tr data-id="${key}">
                     <th scope="row">${key}</th>
                    <td>${data[key].name}</td>
                    <td class="score" data-batch="1">${data[key].score[1]}</td>
                    <td class="score" data-batch="2">${data[key].score[2]}</td>
                    <td class="score" data-batch="3">${data[key].score[3]}</td>
                    <td class="score" data-batch="4">${data[key].score[4]}</td>
                    <td class="score" data-batch="5">${data[key].score[5]}</td>
                </tr>`
            }
            tbody.innerHTML = htmlStr
        })

    }
    init()

    // 可编辑的表格效果 添加input
    tbody.addEventListener('click', function (e) {
        // 事件委托
        if (e.target.className == 'score') {
            // console.log(123)
            let td = e.target
            // 判断当前td是否有输入框，如果没有则创建和添加
            if (!td.querySelector('input')) {

                // 将td的内容有变量储存，方便使用
                let score = td.innerHTML
                td.innerHTML = ''
                // console.log(td)
                // 当点击td时添加input文本框
                let input = document.createElement('input')
                td.appendChild(input)


                // 将td的原始内容填充到输入框
                input.value = score


                // 设置文本框样式
                input.style.outline = 'none'
                input.style.border = 'none'
                input.style.backgroundColor = 'transparent'
                input.style.textAlign = 'center'
                // 让内容默认被选中
                input.select()
                // 为输入框添加失焦事件，将数据还原
                input.addEventListener('blur', function () {
                    td.innerHTML = score
                })

                // 修改成绩或录入
                input.addEventListener('keydown', function (e) {
                    // console.log(e)
                    if (e.key === 'Enter') {
                        // console.log(123)
                        axios({
                            url: '/score/entry',
                            method: 'post',
                            data: {
                                stu_id: td.parentNode.dataset.id,
                                batch: td.dataset.batch,
                                score: input.value
                            }
                        }).then(res => {
                            // console.log(res)
                            toastr.success(res.data.message)
                            td.innerHTML = ''
                            td.innerHTML = input.value
                        })
                    }
                })
            }

        }
    })
})